<template>
    <div class="payment-page">
      <h2>购物车详情</h2>
      <div class="cart-summary">
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <ul v-else class="cart-list">
          <li v-for="item in cartItems" :key="item.id" class="cart-item">
            <div class="product-image">
              <img :src="item.image" :alt="item.item_name" style="width: 100px; height: 100px;">
            </div>
            <h3>{{ item.itemName }}</h3>
            <p>单价: ￥{{ item.itemPrice }}</p>
            <p>购买数量: {{ item.count }}</p>
            <p>小计: ￥{{ (item.itemPrice * item.count).toFixed(2) }}</p>
            <div class="actions">
              <button @click="removeFromCart(item.itemName)">移出购物车</button>
            </div>
          </li>
        </ul>
        <div class="total">
          总计：￥{{ totalAmount }}
        </div>
        <button @click="goToPayment">去支付</button>
      </div>
    </div>
  </template>
  
  <script>
  import instance from '@/utils/request';
  
  export default {
    name: 'pay',
    data() {
      return {
        cartItems: [],
        loading: true,
        error: '',
      };
    },
    computed: {
      totalAmount() {
        return this.cartItems.reduce((total, item) => {
          return total + (item.itemPrice * item.count);
        }, 0).toFixed(2);
      },
    },
    mounted() {
      this.fetchCartItems();
    },
    methods: {
      async fetchCartItems() {
        this.loading = true;
        try {
          const response = await instance.get(`http://8.219.49.219:8080/onlineShopping/shoppingCar/getAll`);
          this.cartItems = response.data.data;
        } catch (error) {
          this.error = '无法获得购物车信息';
        } finally {
          this.loading = false;
        }
      },
      goToPayment() {
        this.$router.push('/wechat');  
      },
      async removeFromCart(itemName) {
          const confirmRemove = window.confirm('确定要移除该商品吗？');
          if (confirmRemove) {
              try {
                await instance.delete(`http://8.219.49.219:8080/onlineShopping/shoppingCar/remove`, {
                  data : {itemName}
                });
                location.reload();
              } catch (error) {
                console.error('移除商品失败', error);
              }
         }
      }
    }
  };
  </script>
  
  <style scoped>
  .payment-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.cart-summary {
  margin-bottom: 20px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; 
  padding: 10px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background-color: #f9f9f9; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  transition: transform 0.3s ease-in-out; 
}

.cart-item:hover {
  transform: translateY(-5px); 
}

.product-image img {
  width: 100px;
  height: 100px;
}

.product-details {
  flex-grow: 1;
  padding-left: 20px; 
}

h3 {
  margin: 0 0 10px 0;
}

p {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.total {
  font-weight: bold;
  margin-bottom: 20px;
  text-align: right;
}

button {
  padding: 10px 20px;
  background-image: linear-gradient(to right, #0056b3, #007bff);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
  transition: all 0.3s ease-in-out; 
}

button:hover {
  background-image: linear-gradient(to right, #007bff, #0056b3); 
  box-shadow: 0 6px 8px rgba(0,0,0,0.2); 
  transform: translateY(-3px); 
}

button:active {
  background-image: linear-gradient(to right, #0056b3, #007bff); 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  transform: translateY(1px); 
}
.actions {
  display: flex;
  align-items: center;
  padding-left: 20px;
}
</style>